<template>
  <div style="margin-top: 0px">
    <!-- 整个页面的外层容器 -->
    <el-row gutter="20">

     <el-col span="6">
          <el-menu
              router
              :default-active="$router.currentRoute.path"
              class="el-menu-vertical-demo"
              background-color="#fff"
              text-color="black"
              active-text-color="#fff">
            <!-- 首页 -->
            <el-menu-item index="/welcome/content/info">
              <i class="el-icon-s-home"></i>
              <span>我院简介</span>
            </el-menu-item>
            <el-menu-item index="/welcome/content/equipment">
              <i class="el-icon-s-home"></i>
              <span>园区配置</span>
            </el-menu-item>

            <el-menu-item index="/welcome/content/food">
              <i class="el-icon-s-home"></i>
              <span>食堂餐品</span>
            </el-menu-item>

            <el-menu-item index="/welcome/content/medical">
              <i class="el-icon-s-home"></i>
              <span>医务室</span>
            </el-menu-item>


          </el-menu>
     </el-col>

     <el-col span="18">
          <router-view/>  <!--  Backtop组件 -->
          <!-- 使用router-view显示主要区域的内容，即：由其它视图组件来显示主要区域的内容 -->
          </el-col>
     </el-row>

  </div>



</template>

<script>
export default {

}
</script>

<style >
.layout-header {
background: #E6A23C;
}
.layout-header h1 {
  color: #fff;
  line-height: 60px;
}

.layout-body {
  /*position: absolute;*/
  top: 100px;
  bottom: 0;
  left: 50px;
  right: 0;
}

.layout-aside {
  background: #ffffff !important;
  color: black !important;

}

.layout-aside i {
  margin-left:5px ;
  color: #E6A23C !important;
}

.layout-main {
  background: #fff;
}

.el-menu-item.is-active {
  background: #cc9137 !important;
}

</style>